<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语音听写（流式版）</title>
    <style>
#userInput {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical; /* 允许用户上下拖动调整大小 */
  box-sizing: border-box;
}
.blue-button {
  background-color: #007BFF; /* Bootstrap 蓝色 */
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.blue-button:hover {
  background-color: #0056b3;
}

</style>
  </head>
  <body>
    <br />
    <div>语音听写（流式版）浏览器录音听写：<button id="btn_control">开始录音</button></div>
     <!-- 新增：语言选择下拉框 -->
  <select id="languageSelector" style="margin-left: 10px; padding: 5px;">
    <option value="zh_cn" selected>中文</option>
    <option value="en_us">英文</option> 
  </select>
  应用领域
  <select id="domainSelector" style="margin-left: 10px; padding: 5px;">
    <option value="iat" selected>日常用语</option>
    <option value="mianqie">方言免切（支持23种方言+中文普通话混合识别）</option>
    <option value="medical">医疗</option>
    <option value="assistant">政务坐席助手</option>
    <option value="ansys">政务语音分析</option> 
  </select>
  方言 仅在为中文时，支持方言选择。
   <select id="accentSelector" style="margin-left: 10px; padding: 5px;">
    <option value="mandarin" selected>普通话</option>
    <option value="mandarin">英语</option>
    <option value="cantonese">广东话</option>
    <option value="changshanese">长沙话</option>
  </select>
（仅中文支持）字体
  <select id="rlangSelector" style="margin-left: 10px; padding: 5px;">
    <option value="zhcn" selected>简体中文（默认值）</option>
    <option value="zhhk">繁体香港</option>
  </select>
    <br />

    <a href="/" target="_blank">返回主站点Speech </a>
    <a  style="display: none;" href="https://www.xfyun.cn/services/voicedictation?target=ex" target="_blank">讯飞官网</a> 
    <br />
    <div>
      音频文件听写(16kHz, s16le, pcm)： <input type="file" id="input_file" />（最长60s） 
      <a  href="asr_example.wav" target="_blank">asr_example.wav</a>  
    </div>
    <div style="margin-bottom: 20px;">
  <div >******************讯飞语音转文字 阿里翻译**********************</button>

     

  <div id="result"></div>
  <div id="result2"></div>
</div> 
<!-- 新增部分 -->
 <br />
<div>
  <label for="userInput">请输入调整内容：</label>
  <button type="button" class="blue-button" id="btn_copy_result">填充识别结果</button>
  <textarea id="userInput" rows="5" cols="50" placeholder="在此输入内容后会自动触发API请求..."></textarea>
</div>
<div id="result4"></div>
    <script>
      var APPID = "35d590e3";
      var API_SECRET = "NWI0Nzk5NmJkNjQ0YmFjMDFhZWIxOWVj";
      var API_KEY = "6fc5141ccc2fee7bf928e178da55df95";
    </script>
    <script src="../crypto-js.js"></script>
    <script src="../../dist/index.umd.js"></script>
    <script src="./index.js"></script>
    <script src="./input-file.js"></script>
  <script> 
 
 
const targetNode = document.getElementById("result");
const userInput = document.getElementById("userInput");
const result4Div = document.getElementById("result4");

// 配置观察选项
const config = { childList: true, subtree: true };

// 创建回调函数
const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === "childList") {
            const resultContent = targetNode.innerText;
            if (resultContent.trim()) {

 const endsWithPunctuation = /[。.!?]$/g.test(resultContent); 
    if (!endsWithPunctuation) {
       // result4Div.innerText = "请输入完整句子（以。 . ! ? 结尾）再触发请求";
        return;
    }

                callExternalAPI(resultContent);
            }
        }
    }
};

// 创建一个 MutationObserver 实例
const observer = new MutationObserver(callback);

// 开始观察
observer.observe(targetNode, config);

// 使用 XMLHttpRequest 发起请求
function callExternalAPI(text) {
    const xhr = new XMLHttpRequest();  
const url = "/translate/hellopost";
    xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                try {  
                    document.getElementById("result2").innerText = xhr.responseText || "无返回结果";

                } catch (e) {
                    document.getElementById("result2").innerText = "解析响应失败";
                }
            } else {
                document.getElementById("result2").innerText = "API 调用失败";
            }
        }
    }; 
    xhr.send(JSON.stringify({ content: text })); 
}
 


userInput.addEventListener("input", function () {
  const text = userInput.value.trim();
  if (text === "") {
    result4Div.innerText = "";
    return;
  }
 const endsWithPunctuation = /[。.!?]$/g.test(text); 
    if (!endsWithPunctuation) {
       // result4Div.innerText = "请输入完整句子（以。 . ! ? 结尾）再触发请求";
        return;
    }
  // 发送 POST 请求
  const xhr = new XMLHttpRequest();
  const url = "/translate/hellopost";
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        try {
          // 假设返回的是纯文本或 JSON
          // const data = JSON.parse(xhr.responseText);
          // result4Div.innerText = data.response || "无返回结果";
          result4Div.innerText = xhr.responseText || "无返回结果";
        } catch (e) {
          result4Div.innerText = "解析响应失败";
        }
      } else {
        result4Div.innerText = "API 调用失败";
      }
    }
  };

  xhr.send(JSON.stringify({ content: text }));
});


document.getElementById("btn_copy_result").addEventListener("click", function () {
    const resultDiv = document.getElementById("result");
    const userInput = document.getElementById("userInput");

    if (resultDiv && userInput) {
        userInput.value = resultDiv.innerText.trim(); // 将识别结果填入文本框
        userInput.dispatchEvent(new Event("input"));  // 触发 input 事件，触发 API 请求
    }
});
    </script>
  </body>
</html>
